<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="/images/favicon.ico"  type="image/x-icon">
<!--    <link rel="shortcut icon"  type="image/png">-->

    <title>在线考试系统</title>

    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
<body class="horizontal-menu-page">

<section>

    <div th:replace="~{user/commons/common :: commonhead('questionList.html')}"></div>


    <!--正文开始-->
    <div class="wrapper" id="war">
        <div class="col-md-12">
            <!--问题列表开始-->
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        问题
                    </div>
                    <!--搜索开始-->
                    <div style="margin-top: 15px; " class="col-md-3">
                        <div class="input-group m-bot15">
                                              <span class="input-group-btn">
                                                <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button>
                                              </span>
                            <form th:action="@{/user/questionList}">
                                <input type="text" class="form-control" name="searchName" placeholder="输入关键字搜索">
                            </form>
                        </div>

                    </div>
                    <div style="margin-top: 15px; " class="col-md-3">
                        <div class="input-group m-bot15">
                                              <span class="input-group-btn">
                                                <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button>
                                              </span>
                            <form th:action="@{/user/questionList}">
                                <input type="number" class="form-control" name="searchId" placeholder="输入ID搜索" >
                            </form>
                        </div>

                    </div>
                    <!--搜索结束-->
                    <!--分类/标签开始-->
                    <div style="margin-top: 15px; " class="col-lg-4"></div>

                    <div id="pie-chart-donut" class="pie-chart">
                        <div id="panel-body">
<!--                            内容开始-->
                            <table class="table  table-hover general-table">
                                <thead>
                                <tr>
                                    <th>题目标号</th>
                                    <th class="hidden-phone">标题</th>
                                    <th>题型</th>
                                    <th>难度</th>
                                    <th>解决</th>
                                    <th>状态</th>
                                </tr>
                                </thead>
                                <tbody>

                                    <tr th:each="question :${questionList}">
                                        <td >
                                            <a  th:text="${question.id}" th:value="${question.id}"  href="javascript:void(0)" onclick="toAnswerPage(this,this.innerHTML)"></a>
                                        </td>
                                        <td >
                                            <a th:text="${question.content}" th:value="${question.id}" href="javascript:void(0)" th:onclick="toAnswerPage([['']],[[${question.id}]])"></ a>
                                        </td>
                                        <td th:if="${question.questionType}==1" th:text="单选题" class="text-secondary"></td>
                                        <td th:if="${question.questionType}==2" th:text="多选题" class="text-primary"></td>
                                        <td>
                                            <span th:if="${question.difficult}==1" th:text="简单" class="label label-success">简单</span>
                                            <span th:if="${question.difficult}==2" th:text="中等" class="label label-primary">中等</span>
                                            <span th:if="${question.difficult}==3" th:text="困难" class="label label-danger">困难</span>
                                        </td>
                                        <td th:text="${question.solutioned}"></td>
                                        <td>
                                            <span th:unless="${question.result}" class="label label-default" th:text="未做过"></span>
                                            <span th:if="${question.result == 1}" class="label label-warning" th:text="未完成"></span>
                                            <span th:if="${question.result == 2}" class="label label-success" th:text="已完成"></span>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
<!--                            内容结束-->
                            <!--分页-->
                            <div th:fragment="page"><!--定义用于被显示列表页包含-->
                                <head>
                                    <style>
                                        .page-item {
                                            padding: 1px 5px;
                                            border: 1px solid #afafaf;
                                            margin-left: 3px
                                        }

                                        .page-item.active {
                                            color: red;
                                            border: 1px solid red;
                                        }
                                    </style>
                                </head>
                                <div style="float: left" th:if="${page.pages>0}">
                                    当前第<span th:text="${page.current}"></span>页,共<span
                                        th:text="${page.pages}"></span>页,总记录数<span th:text="${page.total}"></span>
                                </div>
                                <div style="float: right" th:if="${page.pages>0}">
                                    <a th:href="@{${jumpUrl}+${qName}+${searchNameValue}+${qId}+${searchIdValue}+${pool}+${poolValue}}" th:text="首页" th:if="${page.current>1}" th:class="page-item"></a>
                                    <a th:href="@{${jumpUrl}+${page.current-1}+${qName}+${searchNameValue}+${qId}+${searchIdValue}+${pool}+${poolValue}}" th:text="上一页" th:class="page-item"
                                       th:if="${page.current>1}"></a>
                                    <a th:href="@{${jumpUrl}+${i}+${qName}+${searchNameValue}+${qId}+${searchIdValue}+${pool}+${poolValue}}"
                                       th:each="i :${#numbers.sequence(1, page.pages)}" th:text="${i}"
                                       th:class="${page.current == i}? 'page-item active' :'page-item' "></a>
                                    <a th:href="@{${jumpUrl}+${page.current+1}+${qName}+${searchNameValue}+${qId}+${searchIdValue}+${pool}+${poolValue}}" th:text="下一页" th:class="page-item"
                                       th:if="${page.current<page.pages}"></a> <a
                                        th:href="@{${jumpUrl}+${page.pages}+${qName}+${searchNameValue}+${qId}+${searchIdValue}+${pool}+${poolValue}}" th:text="尾页" th:class="page-item"
                                        th:if="${page.current<page.pages}"></a>
                                </div>
                            </div>
                            <!--分页结束-->

                        </div>

                    </div>
                </div>
            </div>
            <!-- 问题列表结束-->
        </div>
        &nbsp;
        <div class="col-md-12">
            <!--分类开始-->
            <div class="col-md-12">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">问题分类</h3>
                    </div>
                    <div class="panel-body">
                       <div class="">
                           <!--内容开始-->
                           <p style="text-align:center" class="col-md-1" th:each="type : ${typeList}">
                               <a class="btn btn-info btn-xs  " th:href="@{/user/questionList(pool=${type.getQPool()})}" type="button" th:text="${type.getQType()}"></a>
                           </p>
                           <!--内容结束-->
                       </div>
                    </div>
                </div>
            </div>
            <!--分类结束-->
        </div>
    </div>
    <!--正文结束-->

    <!--底部开始-->
    <footer class="sticky-footer">
        2022 &copy;<a href="https://www.pdsu.edu.cn/" target="_blank">平顶山学院软件应用双创实验室提供技术支持</a>
    </footer>
    <!--底部结束-->

</section>

<div th:replace="~{user/commons/common :: commonupdatePwd}"></div>

<!--悬停样式-->
<script type="text/css">
    .c a:hover,a:focus {
        color: #65CEA7
    }
</script>


<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>

<script src="/js/scripts.js"></script>



<script type="text/javascript">
    $(document).ready( function() {
        var a = document.getElementsByClassName("btn btn-info btn-xs  ")
        for(var i=0;i<a.length;i++){
            a[i].setAttribute('class','btn btn-warning btn-xs  ')
            a[i+1].setAttribute('class','btn btn-success btn-xs  ')
            a[i+2].setAttribute('class','btn btn-warning btn-xs  ')
            a[i+3].setAttribute('class','btn btn-danger btn-xs  ')
        }
    });


    // 修改密码
    $("#pwd_btn").click(function() {
        $("#pwd_btn").blur();
        if (confirm("是否确定修改?")){
            var submit = true;
            var oldPwd = $("#oldPwd").val(); //原始密码
            var newPwd = $("#newPwd").val(); //新密码1
            var newPwd2 = $("#newPwd2").val(); //新密码2

            if ((oldPwd && newPwd && newPwd2) == '') {
                $("#tip").html("密码不能为空");
                $("#tip").show();
                submit = false;
            }
            if(submit){
                $.ajax({
                    type:"post",
                    url:"/user/updatePwd",
                    data: JSON.stringify({
                        oldPwd : oldPwd,
                        newPwd : newPwd,
                        newPwd2 : newPwd2
                    }),
                    contentType: "application/json;charset=utf-8",
                    //定义回调响应的数据格式为JSON字符串，该属性可以省略
                    dataType: "json",
                    success:function (data){
                        if(data.code == 200 ){
                            $("#tip").hide();
                            $("#pwd_form").submit();
                            alert("修改成功，请重新登录!")
                            window.location.href = "/user/logout"
                        }else if(data.code != 200){
                            $("#tip").html(data.info);
                            $("#tip").show();
                        }
                    }
                });
            }
        }
    });
function toAnswerPage(node,id) {
    var tr  = ($(node)).parent().parent()
    var nextqId =  tr.next().children(":first").children(":first").text();
    var lastqId =  tr.prev().children(":first").children(":first").text();
    // if(nextqId == ''){
    //     alert("没有下一题了！")
    // }
    // if(lastqId == ''){
    //     alert("没有上一题了！")
    // }
    $('#war').load('/user/toQuestionDetail');
    getQuestionDetails(id,nextqId,lastqId)
}
    function getQuestionDetails(id,nextqId,lastqId) {
        id = id.toString();
        nextqId = nextqId.toString();
        lastqId = lastqId.toString();
        $.ajax({
            //请求路径
            url: "/user/questionDetail",
            //请求类型
            type: "POST",
            //data表示发送的数据
            data:id,
            contentType: "application/json;charset=utf-8",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType: "json",
            // 成功响应的结果
            success: function (data) {
                if (data.code == 200) {
                    $('#difficult').removeClass('hidden')
                    //题型
                    var qType = data.data.questionType
                    if(qType=='1'){
                        $('#questionType').addClass("label-success").text("单选题")
                        $("#sub").addClass('hidden')
                    }else if(qType=='2'){
                        $('#questionType').addClass("label-warning").text("多选题")
                        $("#sub").removeClass('hidden')
                    }else if(qType=='3'){
                        $('#questionType').addClass("label-danger").text("判断题")
                        $("#sub").addClass('hidden')
                    }else{
                        $('#questionType').addClass("label-default").text("未分类")
                    }
                    $('#questionType').removeClass('hidden')
                    //解析隐藏状态
                    $('#answerDiv').addClass('hidden')
                    //题目难度状态
                    var dif = data.data.difficult
                    if(dif=='1'){
                        $('#difficult').addClass("label-success").text("简单")
                    }else if(dif=='2'){
                        $('#difficult').addClass("label-warning").text("中等")
                    }else if(dif=='3'){
                        $('#difficult').addClass("label-danger").text("困难")
                    }else{
                        $('#difficult').addClass("label-default").text("未分")
                    }
                    $('#difficult').removeClass('hidden')
                    $('#hqId').attr('value',data.data.qid)
                    $('#qId').attr('text',data.data.qid)
                    $('#qId').html(data.data.qid+":")
                    var len = data.data.questionItemObjects.length
                    $('#size').attr('value',len)
                    $('#title').html(data.data.titleContent)

                    var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
                    for(var i = 0; i<arr.length;i++){
                        $("#choice"+arr[i]+"").addClass("hidden")
                    }
                    for(var i = 0; i<len;i++){
                        $("#choice"+data.data.questionItemObjects[i].prefix+"").removeClass("hidden")
                        $("#btn_"+data.data.questionItemObjects[i].prefix+"").
                        attr("text",data.data.questionItemObjects[i].prefix)
                            .attr("value",data.data.questionItemObjects[i].prefix).
                        html(data.data.questionItemObjects[i].prefix)
                        $("#h5_"+data.data.questionItemObjects[i].prefix+"").
                        attr("text",data.data.questionItemObjects[i].content).
                        html(data.data.questionItemObjects[i].content)
                    }
                    $('#lastQ').attr('value',lastqId)
                    $('#nextQ').attr('value',nextqId)
                }
                else {
                    alert("系统发生了错误请重试");
                }

            },
        })
    }
</script>
</body>
</html>